<template>
  <uni-popup ref="fillState" type="center" :is-mask-click="false">
    <view class="fillState">
      <view class="center" @click="change()" style="justify-content: flex-end;">
        <uni-icons type="circle-filled" size="25" :color="allBlue?'#2694FB':'#999'"></uni-icons>
        <view :style="{color:allBlue?'#2694FB':'#333'}">全选</view>
      </view>
      <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
        :style="{ height: pageHeight + 'px' }">
        <view class="center" style="flex-wrap: wrap;">
          <view v-for="(item,index) in fillLists" :key='index' class="but"
            :style="{background:Selected.indexOf(item.id)!==-1?'#2694FB':'#eee',color:Selected.indexOf(item.id)!==-1?'#fff':'#333'}"
            @click="addFill(item.id)">
            {{item.code}}
          </view>
        </view>
      </scroll-view>
      <Button @cancel="closeBankPad" @confirm="submit()" style="margin-top:20rpx"></Button>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
  import { toPublish } from '@mqtt';
  import { getRoleFill } from '@/gql/administrator';
  import Button from './buttom.vue';
  import { errorToast } from '@/utils/prompt';
  import { onLoad } from '@dcloudio/uni-app';
  import { ref } from 'vue';
  /**
   * 选择加注机弹框
   * @property {Array} fillLists 加注机列表
   * @property {Number} idenID 车友ID
   * @property {Array} Selected 选中的加注机ID
   * @property {Null} fillState 弹框
   * @property {String} pageHeight 加注机列表的高度
   */
  const fillLists = ref()
  const idenID = ref()
  const Selected = ref([])
  const fillState = ref(null)
  const allBlue = ref(false)
  const pageHeight = ref()
  const emit = defineEmits(['submit']);
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = res.windowHeight - 350;
    },
  });
  onLoad((pearm) => {
    idenID.value = pearm.id
  })
  /**
   * 获取加注机列表
   */
  function fillList(id : string) {
    const payload = {
      query: getRoleFill,
      variables: {
        driver_id: Number(idenID.value),
        role_id: Number(id)
      },
    };
    toPublish(
      'ql/control/getRoleFill',
      payload,
      (obj : any) => {
        const { getRoleFill } = obj.data;
        fillLists.value = getRoleFill
      }
    );
  }
  /**
   * 选择加注机ID
   * @property {Number} id 加注机id
   */
  function addFill(id : number) {
    if (Selected.value.indexOf(id) == -1) {
      Selected.value.push(id)
      if (Selected.value.length == fillLists.value.length) {
        allBlue.value = true
      }
    } else {
      Selected.value.map((item, index) => item === id ? Selected.value.splice(index, 1) : '')
    }
    console.log(Selected.value)
  }
  /**
   * 全选
   */
  function change() {
    Selected.value = []
    if (allBlue.value) {
      allBlue.value = false
    } else {
      allBlue.value = true
      fillLists.value.map((item : any) => Selected.value.push(item.id))
    }
  }
  /**
   * 提交选中的加注机ID
   */
  function submit() {
    if (Selected.value.length < 1) {
      errorToast('请选择加注机')
      return
    }
    closeBankPad()
    emit('submit', Selected.value)
  }
  // 开关加注机列表弹框
  function openBankPad() {
    Selected.value = []
    allBlue.value = false
    fillState.value.open();
  }
  function closeBankPad() {
    fillState.value.close();
  }
  defineExpose({ openBankPad, fillList });
</script>

<style scoped lang="less">
  .fillState {
    width: 650rpx;
    background-color: white;
    border-radius: 5px;
    padding: 30rpx 30rpx 40rpx 30rpx;
    box-sizing: border-box;
  }

  .but {
    min-width: 120rpx;
    background-color: #2694FB;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    margin: 10rpx 15rpx 10rpx 0px;
    height: 56rpx;
    line-height: 56rpx;
    padding: 0px 20rpx;
    box-sizing: border-box;
  }
</style>